import { View } from "@tarojs/components";
import Taro, { useDidShow, useReachBottom, useRouter } from "@tarojs/taro";

import ByRow from "@/components/ui/ByRow";
import Money from "@/components/app/Money";
import Moment from "@/components/app/Moment";
import Card from "@/components/common/Card";
import Page from "@/components/common/Page";
import ByCell from "@/components/ui/ByCell";
import ByText from "@/components/ui/ByText";
import ListView from "@/components/app/ListView";
import ByButton from "@/components/ui/ByButton";
import UserItem from "@/components/app/UserItem";

import useList from "@/hooks/useList";
import ApiFinance from "@/api/finance";
import { objectToQueryString } from "@/utils";

type AfterSalePaymentItem = {
  /**
   * 售后工单ID
   */
  afterSaleOrderId: number;
  /**
   * 售后工单编号
   */
  afterSaleOrderNo: string;
  /**
   * 申请金额
   */
  applyAmount: number;
  /**
   * 审核时间
   */
  auditTime?: string;
  /**
   * 审核人
   */
  auditUserName?: string;
  /**
   * 单据编号
   */
  billNo: string;
  /**
   * 创建时间
   */
  createTime: string;
  /**
   * 创建人
   */
  createUserName: string;
  /**
   * 客户名称
   */
  customerName: string;
  /**
   * 客户编号
   */
  customerNo: string;
  /**
   * 装修地址
   */
  decorationAddress: string;
  /**
   * 费用类别
   */
  feeCategory: string;
  /**
   * 附件数量
   */
  fileCount?: number;
  /**
   * 附件ID
   */
  fileRefererId?: string;
  /**
   * 意向客户ID
   */
  intentCustomerId: number;
  /**
   * 付款单ID
   */
  paymentBillId: number;
  /**
   * 付款阶段
   */
  paymentStage: string;
  /**
   * 状态
   */
  status: number;
  /**
   * 摘要
   */
  summary: string;
  /**
   * 付款对象ID
   */
  tagetUserId: number;
  /**
   * 付款对象名称
   */
  tagetUserName: string;
  /**
   * 付款对象类型
   */
  tagetUserType: number;
  [property: string]: any;
};

const statusEnum = {
  "-1": { label: "驳回", color: "error" },
  "3": { label: "驳回", color: "error" },
  "1": { label: "待审核", color: "warning" },
  "2": { label: "已通过", color: "success" },
};

const RecordItem = ({ source }: { source: AfterSalePaymentItem }) => {
  const {
    status,
    applyAmount,
    createUserName,
    paymentBillId,
    intentCustomerId,
    createTime,
    tagetUserName,
    summary,
    workFlowInstanceId,
  } = source;

  const statusConfig = statusEnum[status];

  const query = {
    intentCustomerId,
    wl_id: workFlowInstanceId,
    businessId: paymentBillId,
  };

  return (
    <Card
      className="m-3"
      onClick={() =>
        Taro.navigateTo({
          url: `/packageProject/pages/afterSales/detail?${objectToQueryString(
            query
          )}`,
        })
      }
    >
      <ByRow content="between">
        <View className="mb-2 font-bold text-lg">售后记录</View>

        <ByText className="text-sm" type={statusConfig.color}>
          {statusConfig.label}
        </ByText>
      </ByRow>

      <View className="text-sm">
        <ByCell size="small" labelWidth="6em" label="维修负责人：">
          {tagetUserName}
        </ByCell>
        <ByCell size="small" labelWidth="6em" label="申请金额：">
          <Money value={applyAmount} />
        </ByCell>
        <ByCell size="small" labelWidth="6em" label="保修内容：">
          {summary}
        </ByCell>
      </View>

      <ByRow className="mt-2" content="between" align="center">
        <UserItem name={createUserName} />
        <ByText size="sm" type="third">
          <Moment value={createTime} type="full" />
        </ByText>
      </ByRow>
    </Card>
  );
};

export default () => {
  const { params } = useRouter<{ intentCustomerId: `${number}` }>();
  const intentCustomerId = Number(params.intentCustomerId);

  const { loading, list, nextPage, resetToFirst } =
    useList<AfterSalePaymentItem>(ApiFinance.afterSaleList, {
      manual: true,
    });

  useReachBottom(nextPage);
  useDidShow(() => resetToFirst({ intentCustomerId }));

  return (
    <>
      <Page
        footerSticky
        slotFooter={
          <ByButton
            className="w-2/3"
            size="large"
            onClick={() =>
              Taro.navigateTo({
                url: `/packageProject/pages/afterSales/apply?intentCustomerId=${intentCustomerId}`,
              })
            }
          >
            新增售后服务
          </ByButton>
        }
      >
        <ListView loading={loading} isEmpty={list.length === 0}>
          {list.map((item) => (
            <RecordItem key={item.paymentBillId} source={item} />
          ))}
        </ListView>
      </Page>
    </>
  );
};
